<template>
    <div class="">
        <div class="title-row">
            <div class="flex item-center">
                <div class="label-line"></div>
                <span class="title">我的统计</span>

            </div>
            <div class="line"></div>
            <div class="flex">
                <button class="filter-btn" v-on:click="onFilterStat('history')" v-bind:class="{active:type=='history'}">累计</button>
                <button class="filter-btn" v-on:click="onFilterStat('today')" v-bind:class="{active:type=='today'}">今日</button>
            </div>
        </div>
        <ul class="stat-content">
            <li class="stat-li">
                <p class="stat-titl">共制证</p>
                <p class="stat-num">{{dataAll.makeAmount||'-'}}</p>
            </li>
           <li class="stat-li">
                <p class="stat-titl">待制证</p>
                <p class="stat-num">{{dataAll.unMakeAmount||'-'}}</p>
            </li>
            <li class="stat-li">
                <p class="stat-titl">已取证</p>
                <p class="stat-num">{{dataAll.getAmount||'-'}}</p>
            </li>
            <li class="stat-li">
                <p class="stat-titl">已邮寄</p>
                <p class="stat-num">{{dataAll.postAmount||'-'}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
import {countMakeAll} from "../../config/api.js";
export default {
    data() {
        return {
            dataAll: {}, //请求回来的数据
            type: 'history' //history表示累计，today表示今日
        };
    },
    methods: {
        onFilterStat(type) {
            if(type!=this.type){
                this.type = type;
                this.getList(type);
            }
        },
        getList (type) {
            countMakeAll({type}).then((res = {})=>{
                this.dataAll=res.data||{};
            })
        }
    },
    created(){
        this.getList(this.type);
    }
};
</script>

<style lang = "scss" scoped>
@import "../../css/unifyAcceptWorkbench.scss";
.filter-btn {
    height: 24px;
    width: 45px;
    color: #fff;
    background-color: #898989;
    &:first-child {
        margin-right: 5px;
    }
    &.active {
        background: #822424;
    }
}
.stat-content {
    padding: 25px 0;
    display: flex;
    justify-content: space-around;
    .stat-li {
        background-color: #f5f6fa;
        border-radius: 5px;
        border: solid 1px #cbd1ed;
        flex:1;
        margin-right: 1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding:10px 0;
        &:last-child{
            margin-right: 0;
        }
    }
    .stat-titl{
        font-size: 16px;
        color:#666;
        margin-bottom:10px;
    }
    .stat-num{
        font-size: 28px;
        color:#ffaa00;
    }
}
</style>